import { use } from 'echarts/core';
import { CustomChart, FunnelChart } from 'echarts/charts';
import { SVGRenderer } from 'echarts/renderers';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { EChartsOption } from 'echarts';
import { MciPieChart } from '@/components/business/Charts';
import { pipeColor, seriesItem } from '@/components/business/Charts/PieChart/option';
import { getCSSColorV2 } from '@/utils/color-helper';
import { PropType } from 'vue';
import TabsButton from '@/components/base/Button/TabsButton';
// import { toBillion, toBillionFix } from '@/constant';
import { TDescLegendPrimaryValueType } from '@/components/business/Charts/PieChart/DescLegend';
// import { plus } from '@numa/common/utils/math';
use([TooltipComponent, LegendComponent, FunnelChart, CustomChart, SVGRenderer]);

interface IPipeChartDataItem {
  typeName?: string;
  /**
   * 数量/金额
   */
  value?: string;
  // /**
  //  * 占比
  //  */
  // ratio?: string;
}

export default defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array as PropType<IPipeChartDataItem[]>,
      default: () => []
    },
    secondaryData: {
      type: Array as PropType<IPipeChartDataItem[]>,
      default: () => []
    },
    label: {
      type: String,
      default: ''
    },
    secondaryLabel: {
      type: String,
      default: ''
    },
    formatterBillion: {
      type: Boolean,
      default: false
    },
    // totalFormatter: {
    //   type: Function as PropType<(value: number) => string>,
    //   default: null
    // },
    primaryValueType: {
      type: String as PropType<TDescLegendPrimaryValueType>,
      default: null
    }
  },
  setup(props) {
    const activeTab = ref<TDescLegendPrimaryValueType>('QUANTITY');

    const label = computed(() => {
      return activeTab.value === 'QUANTITY' ? props.label : props.secondaryLabel;
    });
    const data = computed(() => {
      if (activeTab.value === 'AMOUNT') {
        return props.secondaryData.map((item) => {
          // 对每一项应用 toBillionFix 方法进行转换
          return {
            ...item,
            value: item.value
          };
        });
      } else if (activeTab.value === 'QUANTITY') {
        return props.data || [];
      }
      // return activeTab.value === 'QUANTITY' ? props.data || [] : props.secondaryData || [];
    });

    const total = computed(() => {
      const tempValue = data.value?.reduce((prev, curr) => {
        // return +plus(prev, Number(curr.value));
        return Number(curr.value);
      }, 0);

      // 因为数据都已经处理过。所以不需要再次toBillion
      // if (props.formatterBillion && (props.primaryValueType === 'AMOUNT' || activeTab.value === 'AMOUNT')) {
      //   return toBillion(tempValue);
      // } else {
      return tempValue;
      // }

      // return props.totalFormatter ? props.totalFormatter(tempValue) : tempValue;
    });

    const showTabs = computed(() => {
      return props.secondaryData?.length > 0;
    });

    const chartOption = computed(() => {
      return {
        color: pipeColor,
        series: [
          {
            ...seriesItem,
            data: data.value?.map((item) => {
              return {
                value: Number(item.value),
                name: item.typeName!
              };
            }),
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter() {
                  return `{a|${total.value}}\n{b|${label.value}}`;
                },
                rich: {
                  a: {
                    color: getCSSColorV2('text-5'),
                    fontSize: 16,
                    lineHeight: 24
                  },
                  b: {
                    color: getCSSColorV2('text-3'),
                    fontSize: 8,
                    padding: [0, 0, 8, 0]
                  }
                }
              }
            }
          }
        ]
      } as EChartsOption;
    });

    return () => (
      <div class="flex-1">
        <div class="flex justify-between items-center">
          <h3 class="m-8px">{props.title}</h3>
          {showTabs.value ? (
            <TabsButton
              class="!inline-flex"
              vModel={activeTab.value}
              tabs={[
                { label: '数量', value: 'QUANTITY' },
                { label: '金额', value: 'AMOUNT' }
              ]}></TabsButton>
          ) : null}
        </div>
        <MciPieChart option={chartOption.value} primaryValueType={props.primaryValueType || activeTab.value} />
      </div>
    );
  }
});
